<script lang="ts" setup>
import { h } from "vue";
import { ElButton, ElInput } from "element-plus";
import { ProSelect } from "@/modules/package/form";
import EnumTag from "@/components/common/EnumTag.vue";

import ApiOrder from "@/api/order";
import useRefund from "./useRefund";
import useProTable from "@/hooks/useProTable";

import {
  EnumOrderStatus,
  EnumRefundStatus,
  EnumTradeStatus,
} from "@/utils/enum";

const tableColumns = [
  { label: "订单号", prop: "sn", minWidth: 120 },
  { label: "交易流水号", prop: "transaction_id", minWidth: 120 },
  {
    label: "订单金额",
    width: 110,
    slot: ({ row }: any) => "¥" + (row.pay_price / 100).toFixed(2),
  },
  {
    label: "订单状态",
    width: 110,
    slot: ({ row }: any) =>
      h(EnumTag, {
        options: EnumOrderStatus,
        value: row.order_state,
      }),
  },
  {
    label: "交易状态",
    width: 110,
    slot: ({ row }: any) =>
      h(EnumTag, {
        options: EnumTradeStatus,
        value: row.trade_state,
      }),
  },
  { label: "退款状态", slot: "refundStatus", minWidth: 160 },
  // { label: "退款金额", slot: "refund_total", minWidth: 40 },
  // { label: "退款时间", prop: "refund_time", minWidth: 40 },
  // { label: "支付方式", prop: "pay_mode", minWidth: 40 },
  // { label: "手机号", prop: "mobile", minWidth: 100 },
  // { label: "ID", prop: "id", width: 100 },
  { label: "下单时间", prop: "create_time", width: 120 },
  { label: "退款原因", prop: "refund_reason", minWidth: 120 },
  {
    label: "操作",
    width: 120,
    fixed: "right",
    slot: ({ row }: any) =>
      row.trade_state === 3 &&
      h(
        ElButton,
        {
          link: true,
          type: "danger",
          onClick: () => refund(row, 3),
        },
        "退款"
      ),
  },
];

const formItems = [
  {
    col: 6,
    label: "订单编号",
    children: {
      type: ElInput,
      field: "sn",
      props: {
        clearable: true,
        placeholder: "请输入",
      },
    },
  },
  {
    col: 6,
    label: "交易流水号",
    children: {
      type: ElInput,
      field: "transaction_id",
      props: {
        clearable: true,
        placeholder: "请输入",
      },
    },
  },
  {
    col: 6,
    label: "交易状态",
    children: {
      type: ProSelect,
      field: "trade_state",
      props: {
        clearable: true,
        options: [
          // 1:待支付 2:拉起支付 3:已支付 4:已取消 5:已退款
          { label: "待支付", value: 1 },
          { label: "支付中", value: 2 },
          { label: "已支付", value: 3 },
          { label: "已取消", value: 4 },
          { label: "已退款", value: 5 },
          { label: "退款中", value: 6 },
        ],
      },
    },
  },
];

// 表格单
const [ProTable, { tableApi }] = useProTable({
  fetchUrl: ApiOrder.ticketList,
  fetchOptions: {
    foramtFetchParams(params: any) {
      const { type, value, ...rest } = params;
      if (value) Reflect.set(rest, type, value);
      return rest;
    },
  },
  tableOptions: { columns: tableColumns },
  formOptions: { formItems },
});

// 退款
const { refund } = useRefund(() => tableApi?.refresh());
</script>
<template>
  <ProTable>
    <template #table-refundStatus="{ row }">
      <template v-if="row.refund_status > 0">
        <p>
          退款金额：¥
          {{ ((row.refund_total ?? row.pay_price) / 100).toFixed(2) }}
        </p>
        <p>退款时间：{{ row.refund_time }}</p>
      </template>

      <EnumTag v-else :options="EnumRefundStatus" :value="row.refund_status" />
    </template>
  </ProTable>
</template>
